<template>
  <footer>
    <router-link
      :to="item.url"
      class="fooBox"
      v-for="item in footerList"
      :key="item.title"
      active-class="{active: active === item.title}"
    >
      <van-icon :name="item.name"></van-icon>
      <span>{{ item.title }}</span>
    </router-link>
  </footer>
</template>
<script>
import { ref } from "vue";
export default {
  setup() {
    const active = ref("首页");
    const footerList = [
      { title: "首页", name: "home-o", url: "/home/first" },
      { title: "分类", name: "search", url: "/home/class" },
      { title: "购物车", name: "friends-o", url: "/home/shopping" },
      { title: "我的", name: "setting-o", url: "/home/mine" },
    ];

    return {
      footerList,
      active,
    };
  },
};
</script>
<style lang="less" scoped>
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  border-top: 1px solid #666;
  display: flex;
  width: 100%;
  height: 55px;
  background: #fff;
  align-items: center;
  .fooBox {
    font-size: 16px;
    align-items: center;
    flex: 1;
    display: flex;
    flex-direction: column;

    .van-icon {
      font-size: 25px;
      margin-bottom: 3px;
    }
  }
  .active {
    color: red;
  }
}
</style>
